import React, { useEffect, useState } from 'react';
import { useSearchParams } from "react-router-dom"
import "./index.scss"
import { QuestionCircleOutlined } from "@ant-design/icons"
import service from '../../../../../api';
import * as echarts from 'echarts';

const Couponshuju = () => {
    //获取并存储参数
    var [params, setParams] = useSearchParams()
    var id = params.get('id')
    //top
    var [mydata, setData] = useState({
        "volume": 0,
        "Totalamount": 0,
        "voucherpen": 0,
        "Oldusers": 0,
        "newuser": 0,
        "myechars": {
            "x": [],
            "visitor": [],
            "payment": []
        }
    })
    console.log(mydata);

    var txt = [
        { text: '用劵成交额', num: mydata.volume },
        { text: '优惠总金额', num: mydata.Totalamount },
        { text: '用劵笔单价', num: mydata.voucherpen },
        { text: '用劵老用户', num: mydata.Oldusers },
        { text: '用劵新用户', num: mydata.newuser }
    ]
    useEffect(() => {
        operateshujulist()
        myecharts()
    }, [])
    useEffect(() => {
        myecharts()
    }, [mydata])
    var operateshujulist = async () => {
        var res = await service.coupon.xlq_couponlist({ "id": id })
        if (res.status == 200) {
            setData(res.data[0].shuju)
        }
    }
    //eachrs
    var myecharts = () => {
        var myChart = echarts.init(document.getElementById('echars2') || document.body);
        // 绘制图表
        myChart.setOption({
            title: {
                text: '交易趋势',
            },
            xAxis: {
                type: 'category',
                data: mydata.myechars.x
            },
            yAxis: {
                type: 'value'
            },
            legend: {
                top: 25
            },
            grid: {
                x: 50,
                y: 50,
                x2: 20,
                y2: 30
            },
            series: [
                {
                    data: mydata.myechars.visitor,
                    smooth: true,  // 设置平滑系数
                    symbol: "none",
                    type: 'line',
                    areaStyle: {
                        color: '#1890ff',
                        opacity: 0.1
                    }
                },
                {
                    data: mydata.myechars.payment,
                    smooth: true,  // 设置平滑系数
                    symbol: "none",
                    type: 'line',
                    areaStyle: {
                        color: 'greenyellow',
                        opacity: 0.1
                    }
                }
            ]
        });
        return myChart;
    }
    return (
        <div className='Couponshuju'>
            <div className="top">
                <p>优惠劵数据概览</p>
                <div className="fei">
                    {
                        txt.map((item: any, index: any) => {
                            return (
                                <div className="item" key={index}>
                                    <div className="te">
                                        <span>{item.text}</span>
                                        &nbsp;&nbsp;
                                        <QuestionCircleOutlined />
                                    </div>
                                    <p>{item.num}</p>
                                </div>
                            )
                        })
                    }
                </div>


            </div>
            <div className="echars">
                <div id="echars2"></div>
            </div>
        </div>
    );
};

export default Couponshuju;